<article>
  <p>此插件允许用户进入灯箱式浏览页面上的图片。</p>
</article>

<section>
  <header><h3>实例</h3></header>
  <article>
    <h4>简单例子</h4>
    <p>为按钮或链接增加<code>data-toggle="lightbox"</code>属性，点击按钮或图片来浏览图片大图。</p>
    <p>增加<code>data-caption="*"</code>属性来为图片增加额外的描述文本。</p>
    <div class="example">
      <div class="row">
        <div class="col-sm-2">
          <a href="docs/img/img2.jpg" data-group="example-1" data-toggle="lightbox" class="btn btn-primary"><i class="icon icon-picture"></i> 浏览图片</a>
        </div>
        <div class="col-sm-4">
          <img data-group="example-2" data-toggle="lightbox" data-caption="小图看大图" src="docs/img/img4.jpg" class="img-thumbnail" alt="" width="200">
        </div>
      </div>
    </div>
    <pre><code>&lt;!-- 使用按钮 --&gt;
&lt;a href=&quot;image.jpg&quot; data-toggle=&quot;lightbox&quot; class=&quot;btn btn-primary&quot;&gt;浏览图片&lt;/a&gt;</code></pre>
    <pre><code>&lt;!-- 使用图片 --&gt;
&lt;img data-toggle=&quot;lightbox&quot; src=&quot;small-image.jpg&quot; data-image=&quot;large-image.jpg&quot; data-caption=&quot;小图看大图&quot; class=&quot;img-thumbnail&quot; alt=&quot;&quot; width=&quot;200&quot;&gt;</code></pre>
    <h4>浏览分组</h4>
    <p>为多个<code>data-toggle="lightbox"</code>指定相同的<code>data-group="*"</code>属性，会启动分组浏览。图片左右两侧会显示图片切换按钮。</p>
    <div class="example">
      <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3"><a href="docs/img/img1.jpg" data-group="example-3" data-toggle="lightbox" data-caption="img1.jpg"><img src="docs/img/img1.jpg" class="img-rounded" alt=""></a></div>
        <div class="col-xs-6 col-sm-4 col-md-3"><a href="docs/img/img2.jpg" data-group="example-3" data-toggle="lightbox" data-caption="img2.jpg"><img src="docs/img/img2.jpg" class="img-rounded" alt=""></a></div>
        <div class="col-xs-6 col-sm-4 col-md-3"><a href="docs/img/img3.jpg" data-group="example-3" data-toggle="lightbox"><img src="docs/img/img3.jpg" class="img-rounded" alt=""></a></div>
        <div class="col-xs-6 col-sm-4 col-md-3"><a href="docs/img/img4.jpg" data-group="example-3" data-toggle="lightbox" data-caption="最后一张"><img src="docs/img/img4.jpg" class="img-rounded" alt=""></a></div>
      </div>
    </div>
    <pre><code>&lt;!-- 分组图片浏览 --&gt;
&lt;a href=&quot;image-1.jpg&quot; data-toggle=&quot;lightbox&quot; data-group=&quot;image-group-1&quot;&gt;&lt;img src=&quot;small-image-1.jpg&quot; class=&quot;img-rounded&quot; alt=&quot;&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;image-2.jpg&quot; data-toggle=&quot;lightbox&quot; data-group=&quot;image-group-1&quot;&gt;&lt;img src=&quot;small-image-2.jpg&quot; class=&quot;img-rounded&quot; alt=&quot;&quot;&gt;&lt;/a&gt;
&lt;a href=&quot;image-3.jpg&quot; data-toggle=&quot;lightbox&quot; data-group=&quot;image-group-1&quot;&gt;&lt;img src=&quot;small-image-3.jpg&quot; class=&quot;img-rounded&quot; alt=&quot;&quot;&gt;&lt;/a&gt;
...</code></pre>
  </article>
</section>

<section>
  <header><h3>用法</h3></header>
  <article>
    <p>为链接增加<code>data-toggle="lightbox"</code>属性会自动初始化灯箱式式浏览效果。也可以手动为链接和图片进行初始化。</p>
    <pre><code>$('a.lightbox-toggle').lightbox();</code></pre>
  </article>
</section>

<script>
function afterPageLoad() {
    $('[data-toggle="lightbox"]').lightbox();
}
</script>
